// @ts-nocheck
import React, {useEffect, useState} from 'react';
import {Button, Col, Descriptions, message, Modal, Row, Select, Spin, Table, Upload} from 'antd'
import {UploadOutlined} from "@ant-design/icons";
import {getExcelData} from "@/services/common";

const ExcelData = (props) => {
  const {visible, onClose, keyList = [], onOk} = props
  const [file, setFile] = useState(null)
  const [loading, setLoading] = useState(false)
  const [excelData, setExcel] = useState([])
  const [keys, setKeys] = useState([])
  const [select, setSelect] = useState([])
  const [selected, setSelected] = useState([])
  useEffect(() => {
    const ob = []
    keyList.forEach(v => {
      ob.push({
        key: v,
        value: null
      })
    })
    setSelected(ob)
  }, [keyList])
  const handleUpload = () => {
    setLoading(true)
    const formData = new FormData();
    formData.append('file', file)
    getExcelData(formData).then((res) => {
      if (res.status === 200) {
        setLoading(false)
        message.success('解析成功').then()
        setExcel(res.data)
        const ob = Object.keys(res.data[0] || {})
        setKeys(ob.map(q => ({title: q, dataIndex: q})))
        setSelect(ob)
      } else {
        setLoading(false)
        message.error('解析失败，请重试！').then()
      }
    })

  }
  const keyValue = (k, v) => {
    let ob = selected
    const values = ob.map(e => e.value)
    if (values.includes(v)) {
      message.error('请勿选择相同字段！').then()
    }
    ob = ob.map(a => {
      if (a.key === k) {
        return {key: a.key, value: v}
      } else {
        return {...a}
      }
    })
    setSelected(ob)
  }
  const getAfterData = () => {
    const list = []
    excelData.forEach(q => {
      const ob = {}
      selected.forEach(v => {
        ob[v.key] = q[v.value]
      })
      list.push(ob)
    })
    return list
  }
  const handleMakeData = () => {
    const values = selected.map(e => e.value)
    const valuesSet = Array.from((new Set(values)))
    if (values.length === valuesSet.length) {
      let flag = true
      selected.forEach(v => {
        if (!v.value) {
          flag = false
        }
      })
      if (flag) {
        onOk(getAfterData())
      } else {
        message.error(`请选择相应字段！`).then()
      }
    } else {
      message.error(`数据存在相同字段，请重新选择！`).then()
    }

  }

  return (
    <Modal
      title={'资源对照表'}
      okText={'开始导入'}
      maskClosable={false}
      destroyOnClose
      width={'90vw'}
      visible={visible}
      onCancel={() => {
        onClose();
        setExcel([])
      }}
      onOk={() => {
        handleMakeData();
        setExcel([])
      }}
    >
      <Spin tip="解析中..." spinning={loading}>
        <Row>
          <Col span={4}>
            <Upload accept={'.xls'} maxCount={1} onChange={(e) => setFile(e.file.originFileObj)}>
              <Button icon={<UploadOutlined/>}>上传</Button>
            </Upload>
          </Col>
          <Col span={18}><Button type={'primary'} onClick={() => handleUpload()}>开始解析Excel</Button></Col>
        </Row>
        <br/>
        <Descriptions title="所需字段" bordered>
          {keyList.map(v => <Descriptions.Item key={v} label={v}>
            <Select style={{width: '10vw'}} placeholder={'请选择对应字段'} onChange={e => keyValue(v, e)}>
              {/* eslint-disable-next-line react/jsx-key */}
              {select.map(e => <Select.Option value={e}>{e}</Select.Option>)}
            </Select>
          </Descriptions.Item>)}
        </Descriptions>
        <br/>
        <Table scroll={{ x: '90vw' }} columns={keys} dataSource={excelData}/>
      </Spin>
    </Modal>

  );
};

export default ExcelData;
